<template>
  <div>
    <div style="width: 40%;">
        <el-input
        @input="search"
          prefix-icon="el-icon-search"
          v-model="page.message"
          placeholder="输入标题"
        ></el-input>
      </div>
      <br>
    <el-table :data="myPost" style="width: 100%">
      <el-table-column prop="id" label="帖子id" width="180"> </el-table-column>
      <el-table-column
        prop="title"
        label="标题"
        width="380"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column prop="postingTime" label="时间" width="300">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="toEditPost(scope.row.id)"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.row.id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页开始 -->
    <br />
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.currentPage"
        :page-sizes="[10, 21, 27, 36]"
        :page-size="page.pageSize"
        layout="total, prev, pager, next, sizes"
        :total="page.total"
      >
      </el-pagination>
    </div>
    <!-- 分页结束 -->
  </div>
</template>
    
<script>
import { getPosts,deletePost } from "../../api/postMg"
export default {
  name: "MyPost",
  data() {
    return {
      page: {
        currentPage: 1,
        pageSize: 10,
        total: 0,
        userId: localStorage.getItem("userId"),
        message: "",
      },
      myPost: [
      ],
    };
  },

  methods: {
    search() {
      //点击搜索
      this.page.currentPage = 1;
      this.getListOrderes();
    },
    async handleDelete(id){
      //删除自己的帖子
      await deletePost(id).then(res=>{
        if(res.data.code==200){
          this.$message.success(res.data.msg)
          this.getSelfPosts()
        }
        else{
          this.$message.error(res.data.code+"::"+res.data.msg)
        }
      })
    },
    async getSelfPosts(){
      await getPosts(this.page).then(res=>{
        if(res.data.code==200){
          this.myPost = res.data.data.list;
          this.page.total = res.data.data.total;
        }
        else{
          this.$message.error(res.data.code+"::"+res.data.msg)
        }
      })
    },
    handleSizeChange(pageSize) {
      //改变每页尺寸触发事件
      this.page.pageSize = pageSize;
      this.getSelfPosts();
    },
    handleCurrentChange(currentPage) {
      //改变当前页也会触发事件
      this.page.currentPage = currentPage;
      this.getSelfPosts();
    },
    toEditPost(id) {
      this.$emit("toEditPost", id);
    },
  },
  mounted(){
    this.getSelfPosts()
  }
};
</script>